<template>
	<view class="uni_box home">
		<navbar title='我要提问' :yin="true">
		</navbar>
		<view class="content">
			<view class="tiview" v-if="type==2">
				<view class="tione">
					<text class="xing">*</text>
					<text class="tiname">请选择项目</text>
				</view>
				<view class="titwo" @click="xmshow=true">
					<text class="titwoname" :class="onecont?'cont':''">{{ onecont?onecont:'请选择' }}</text>
					<image class="hongxia" src="@/pages_subject/static/img/hongxia.png" mode="" />
				</view>
			</view>
			<view class="tiview ztwo"  v-if="type==2&&onecontid">
				<view class="tione">
					<text class="xing">*</text>
					<text class="tiname">请选择级别</text>
				</view>
				<view class="tithree">
					<view class="thitem" @click="jiClick(item)" :class="jiinfo.id==item.id?'thactive':''" v-for="(item,index) in jilist" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="tiview ztwo">
				<view class="tione">
					<text class="xing">*</text>
					<text class="tiname">请选择科目</text>
				</view>
				<view class="tithree">
					<view class="thitem" @click="keClick(item)" :class="keinfo.id==item.id?'thactive':''" v-for="(item,index) in kelist" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="tiview">
				<view class="tione">
					<text class="xing">*</text>
					<text class="tiname">问题标题</text>
				</view>
				<view class="tifour">
					<u-input v-model="title" type="textarea" :border="false" placeholder="写下有效的问题标题可以获得更准确的答案"/>
				</view>
			</view>
			<view class="tiview ztwo">
				<view class="tione">
					<text class="xing">*</text>
					<text class="tiname">详细描述</text>
				</view>
				<view class="tifour">
					<u-input v-model="content" type="textarea" :border="false" placeholder="详细描述你的问题"/>
				</view>
			</view>
			<view class="addview">
				<view class="tiantu" @click="upload" v-if="tuimg.length<3">
					<image class="tiicon" src="@/pages_subject/static/img/tiicon.png" mode="" />
					<text>添加图片</text>
				</view>
				<view class="tiantu" @click="uploadtwo">
					<image class="tiicon" src="@/pages_subject/static/img/tianwen.png" mode="" />
					<text>{{ file!=''?'已添加附件':'添加附件' }}</text>
				</view>
			</view>
			<view class="tulist">
				<!-- <view class="tuitem" @click="upload" v-if="tuimg.length<=3">
					<image class="xiangji" src="@/pages_subject/static/img/xiangji.png" mode="" />
				</view> -->
				<view class="tuitem" v-for="(item,index) in tuimg" :key="index" @click.stop="getyulan(item,tuimg)">
					<image class="tuitemimg" :src="item" mode="" />
					<view class="yichu"  @click.stop="deltu(item,index)">移除</view>
					<!-- <u-icon name="close-circle" class="cha" color="#333" size="35" @click.stop="deltu(item,index)"></u-icon> -->
				</view>
			</view>

			<text class="tishi">*为必填项，上传与提问标题无关的图片或附件可能会被驳回；问题
 提交后，老师会在48H内给予解答。</text>

           
		</view>
		<view class="botview">
			<view class="botbtn" @click="gettijiao">提 交</view>
		</view>

		<!-- 下拉选择 -->
		<u-select v-model="xmshow" :list="xmlist" @confirm="xmconfirm"></u-select>
	</view>
</template>

<script>
import {
		baseUrl
	} from '@/utils/config.js';
// import { error } from 'console';
	export default {
		data() {
			return {
				onecont:'',
				onecontid:'',//项目ID
				value:'',
				xmshow:false,
				xmlist:[
					// {
					// 	value: '1',
					// 	label: '江'
					// },
					// {
					// 	value: '2',
					// 	label: '湖'
					// }
				],
				type:1,//1就是答疑中心进入 2就是正常提问
				kelist:[],
				keinfo:{},
				title:'',//标题
				content:'',//内容
				images:[],//图片
				file:[],//文件
				tuimg:[],
				headimg:'',
				jilist:[],
				jiinfo:{}
			}
		},
		onLoad(option) {
			this.type = option.type
			this.cate_id = option.cate_id
			if(this.type == 1){
				this.getkemu();//获取科目
			}else if(this.type == 2){
				//我的进入
				this.getkemu();//获取科目
				this.getxiangmu();//获取项目
				
			}
		},
		onShow() {
		},
		methods: {
			async getkemu(){
				let res = await this.$u.api.getSubjeck({
					cid:this.cate_id
				});
				this.kelist = res
				this.keinfo = res[0]
			},
			async getxiangmu(){
				let res = await this.$u.api.dagetCate({
				});
				// this.kelist = res
				// this.keinfo = res[0]
				let data = res
				let shuzu = []
				for(let i in data){
					let a = {}
					a.label = data[i].name
					a.value = data[i].id
					shuzu.push(a)
				}
				this.xmlist = shuzu
			},
			async getLevel(){
				let res = await this.$u.api.getLevel({
					cate_id:this.onecontid
				});
				this.jilist = res
				this.jiinfo = res[0]
			},
			xmconfirm(e){
				this.onecont = e[0].label
				this.onecontid = e[0].value
				this.getLevel();//获取级别
			},
			keClick(item){
				this.keinfo = item
			},
			jiClick(item){
				this.jiinfo = item
			},
			upload(e) {
				// this.updatetype = e
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou(1)
						// this.getavatar();//修改信息
					}
				});
			},
			uploadtwo(e) {
				// this.updatetype = e
				uni.chooseFile({
					count: 1,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes);
            			// console.log('file:', chooseImageRes.tempFilePaths[0]); // File对象
						this.headimg =chooseImageRes.tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou(2)
					}
				});
			},
			unloadtou(e){
				// console.log(this.headimg)
				let that = this
				uni.uploadFile({
					// url: baseUrl + '/api/uploadImage', //仅为示例，非真实的接口地址
					url: baseUrl + '/api/v1.common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'token': uni.getStorageSync('token'),
						'shopId':uni.getStorageSync('shopId'),
					},
					// formData: {
					// 	'token':'Bearer '+uni.getStorageSync('token'),
					// },
					success: (uploadFileRes) => {
						// console.log(uploadFileRes)
						// console.log( JSON.parse(uploadFileRes.data).data);
						if(e == 1){
							let tuimg = that.tuimg
							tuimg.push(JSON.parse(uploadFileRes.data).data.fullurl)
							that.tuimg = tuimg
						}else if(e == 2){

							let file = that.file
							file= []
							file.push(JSON.parse(uploadFileRes.data).data.fullurl)
							that.file = file
						}
						
					}
				});
			},
			getyulan(item,list){
				uni.previewImage({
					current: item, //预览图片的下标
					urls: list//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			deltu(item,index){
				let tuimg = this.tuimg
				tuimg.splice(index,1)
				this.tuimg = tuimg
			},
			async gettijiao(){
				if(!this.title){
					this.$u.toast("请输入问题标题");
					return false;
				}
				if(!this.content){
					this.$u.toast("请输入详情描述");
					return false;
				}
				if(this.type == 1){
					let res = await this.$u.api.tiaddQuestion({
						level_id:this.cate_id,
						sid:this.keinfo.id,
						content:this.content,
						title:this.title,
						images:this.tuimg.toString(),
						file:this.file.toString()
					});
					this.$u.toast("操作成功");
					setTimeout(() => {
						uni.navigateBack()
					}, 1000);
				}else if(this.type == 2){
					if(!this.onecontid){
						this.$u.toast("请选择项目");
						return false;
					}
					let res = await this.$u.api.tiaddQuestion({
						cate_id:this.onecontid,
						level_id:this.jiinfo.id,
						sid:this.keinfo.id,
						content:this.content,
						title:this.title,
						images:this.tuimg.toString(),
						file:this.file.toString()
					});
					this.$u.toast("操作成功");
					setTimeout(() => {
						uni.navigateBack()
					}, 1000);
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		// padding-bottom: 150rpx;
		padding: 60rpx 30rpx 150rpx;
		.tiview{
			display: flex;
			flex-direction: column;
			margin-bottom: 50rpx;
			.tione{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 30rpx;
				.xing{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FA4E4E;
				}
				.tiname{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(85, 85, 85, 1);
				}
			}
			.titwo{
				padding: 30rpx;
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				border: 1px solid #EEEEEE;
				.titwoname{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
				.cont{
					color: rgba(17, 17, 17, 1);
					font-weight: 500;
				}
				.hongxia{
					margin-left: auto;
					width: 24rpx;
					height: 13rpx;
				}
			}
			.tithree{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.thitem{
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					padding: 27rpx 45rpx;
					background: #F8F8F8;
					border-radius: 10rpx;
					font-family: PingFangSC;
					font-weight: bold;
					font-size: 28rpx;
					color: #999999;
				}
				.thactive{
					background: #FA4E4E;
					color: #fff;
				}
			}
			.tifour{
				padding: 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #EEEEEE;
				
			}
			
		}
		.addview{
			display: flex;
			flex-direction: row;
			.tiantu{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 14rpx 20rpx;
				border-radius: 28rpx;
				border: 1rpx solid #EEEEEE;
				margin-right: 20rpx;
				.tiicon{
					width: 22rpx;
					height: 22rpx;
					margin-right: 9rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
				}
			}
		}
		.tishi{
			display: block;
			margin: 60rpx 0;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #FA4E4E;
		}
		.ztwo{
			margin-bottom: 30rpx;
		}
	}
	.addview{
			display: flex;
			flex-direction: row;
			.tiantu{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 14rpx 20rpx;
				border-radius: 28rpx;
				border: 1rpx solid #EEEEEE;
				margin-right: 20rpx;
				.tiicon{
					width: 22rpx;
					height: 22rpx;
					margin-right: 9rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
				}
			}
		}
		.tishi{
			display: block;
			margin: 60rpx 0;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #FA4E4E;
		}
		.ztwo{
			margin-bottom: 30rpx;
		}
		.tulist{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 30rpx;
			.tuitem{
				background: #FFFFFF;
				border-radius: 5rpx;
				// box-shadow: 20rpx 10rpx 20rpx 20rpx rgba(202,205,217,0.14);
				width: 150rpx;
				height: 150rpx;
				border: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 20rpx 20rpx 0;
				position: relative;
				.yichu{
					position: absolute;
					z-index: 10;
					width: 100%;
					background-color:rgba(0, 0, 0, 0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: 500;
					height: 40rpx;
					bottom: 0;
					border-radius:  0 0 5rpx 5rpx;
				}
				.cha{
					position: absolute;
					right: -10rpx;
					top: -10rpx;
				}
				.xiangji{
					width: 46rpx;
					height: 42rpx;
				}
				.tuitemimg{
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
		}
</style>
